<template>
	<div class="container">
		<el-page-header @back="goBack" content="小哥信息"></el-page-header>
		<div class="e-m-t-45 flex" style="justify-content: flex-end">
			<el-form :inline="true" class="demo-form-inline">
                <el-form-item label="小哥名称">
                    <el-input placeholder="请输入" v-model="key" prefix-icon="el-icon-search"></el-input>
                </el-form-item>
               <!-- <el-form-item label="联系电话">
                    <el-input placeholder="请输入" prefix-icon="el-icon-search"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="注册日期" prop="">
                    <el-date-picker
                        type="datetimerange"
                        format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="getList">查询</el-button>
                </el-form-item>
			</el-form>
		</div>

		<!-- <el-divider></el-divider> -->
		<!-- <el-row type="flex" justify="space-between" class="nav-bar e-m-b-20">
			<el-col :span="3">
				<el-button type="primary" @click="create" icon="el-icon-plus" size="small">新增</el-button>
			</el-col>
			<el-col class="text-right">
				<el-button type="primary" plain icon="el-icon-upload2" size="small">导入</el-button>
				<el-button plain icon="el-icon-download" size="small">下载</el-button>
			</el-col>
		</el-row> -->
		<el-table :data="tableData" style="width: 100%" stripe>
			<el-table-column fixed label="小哥名称">
                <template slot-scope="scope">
                    <div class="user-face">
                        <div class="avatar">
							<el-avatar v-if="scope.row.photo" :src="fileURL + scope.row.photo" :size="40"></el-avatar>
             				<el-avatar v-else :size="40">{{ scope.row.name.charAt(0) }}</el-avatar>
                            <i class="iconfont icon-nan male" v-if="scope.row.sex=='先生'"></i>
                            <i class="iconfont icon-nv female" v-else></i>
                        </div>
                        <div class="name e-p-l-15">{{scope.row.name}}</div>
                    </div>
                </template>
			</el-table-column>
			<el-table-column prop="mobile" label="手机号" width="150">
			</el-table-column>
			<el-table-column prop="identitycard" label="身份证号码" width="200">
				<template slot-scope="scope">
					<span>{{scope.row.identitycard?scope.row.identitycard:'--'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="level" label="小哥级别" width="150">
				<template slot-scope="scope">
					<span>{{scope.row.level.name}}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="area" label="工作地区" width="160">
			</el-table-column> -->
            <!-- <el-table-column prop="regtime" label="注册时间" width="150">
			</el-table-column> -->
            <el-table-column prop="lastlogindatetime" label="最近登录时间" width="150">
			</el-table-column>
			<el-table-column prop="usestate" label="认证状态" width="100">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.authstate == '已实名'">{{ scope.row.authstate }}</span>
					<span class="color-danger" v-else>{{ scope.row.authstate }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="usestate" label="上线状态" width="100">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.online">上线</span>
					<span class="color-danger" v-else>下线</span>
				</template>
			</el-table-column>
			<el-table-column prop="usestate" label="账号状态" width="100">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.usestate == '已启用'">{{ scope.row.usestate }}</span>
					<span class="color-danger" v-else>{{ scope.row.usestate }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="操作" fixed="right" width="230">
				<template slot-scope="scope">
					<el-tooltip class="item" effect="dark" content="按住ctrl键+鼠标左键新窗口打开" placement="left-start">
           				<el-button type="text" size="small" @click="views($event,scope.row)">查看</el-button>
					</el-tooltip>
					<el-button type="text" @click='startup(scope.row)' size="small">
						<span v-if="scope.row.usestate == '已启用'">冻结</span>
						<span v-else>启用</span>
					</el-button>
					<!-- <el-button type="text" @click='Line(scope.row)' size="small">
						<span v-if="scope.row.usestate == '已启用'">上线</span>
						<span v-else>下线</span>
					</el-button> -->
                    <el-button type="text" size="small" @click="setpassword(scope.row.id)">重置密码</el-button>
					<el-button @click="viewTrajectory(scope.row.id)" type="text" size="small">轨迹</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>

		<el-dialog title="重置小哥密码" :visible.sync="dialogVisible" width="600px" :close-on-click-modal="false">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="新的密码">
					<el-input v-model="form.password" type="password"></el-input>
				</el-form-item>
				<el-form-item label="确认密码">
					<el-input v-model="form.confirmpwd" type="password"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetpass">确认修改</el-button>
					<el-button @click="dialogVisible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 详情页面弹窗 -->
		<el-drawer
			title=""
			:visible.sync="viewShow.show"
			direction="rtl"
			size="50%"
			:with-header="false"
			>
			<bortherView v-if="viewShow.show" :id="viewShow.id" @goBack="viewShow.show = false"></bortherView>
		</el-drawer>
	</div>
</template>

<script>
	import bortherView from './components/views.vue'
	export default {
		layout: 'admin',
		components:{
			bortherView  
		},
		head() {
			return {
				title: '小哥信息' 
			}
		},
		data() {
			let password = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.form.confirpwd !== '') {
						this.$refs.form.validateField('confirpwd');
					}
					callback();
				}
			};
			let confirpwd = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.form.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				viewShow:{
					id: 0,
					show: false //详情页面弹窗
				},
				dialogVisible: false,
				loading:true,
				key: '',
				page: 1,
				pageSize: 10,
				total: 0,
				tableData: [],
				form:{
					id:0,
					password: '',
					confirmpwd: ''
				},
				rules: {
					sourcepassword: [{
						required: true,
						message: '请填写当前使用的密码',
						trigger: 'blur'
					}],
					password: [{
						validator: password,
						trigger: 'blur'
					},
					{
						min: 6,
						max: 16,
						message: '长度在 6 到 16 个字符',
						trigger: 'blur'
					}
					],
					confirmpassword: [{
						validator: confirpwd,
						trigger: 'blur'
					},
					{
						min: 6,
						max: 16,
						message: '长度在 6 到 16 个字符',
						trigger: 'blur'
					}
					]
				},
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			goBack() {
				this.$router.go(-1)
			},
			setpassword(id){
				this.form.id = id
				this.dialogVisible = true
			},
			resetpass(){
				this.$confirm('确认修改该小哥的登录密码吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.post('/Admin/Brother/Account/ResetPass',this.form).then((res) => {
						this.$message.success(res.msg);
						this.dialogVisible = false
						this.getList()
					})
				})
			},
			getList() {
				this.tableData = []
				this.loading = true
				this.$axios.post('/Admin/Brother/Account/List', {
					"PageIndex": this.page,
					"PageSize": this.pageSize,
					"Key": this.key
				}).then((res) => {
					this.loading = false
					this.tableData = res.rows;
					this.total = res.total;
				}).catch(()=>{
					this.loading = false
				})
			},
			views(event,row) {
				if (event.ctrlKey) {
					console.log('Ctrl + 左键点击');
					// 这里可以执行你需要的操作
					let param = []
					for(let k in this.param){
						if(this.param[k]){
							param.push(`${k}=${this.param[k]}`)
						}
					}
					this.$router.push(`/distribution/list?${param.join('&')}`)

					window.open('/distribution/views?id=' + row.id, '_blank');
				} else {
					console.log('普通点击');
					this.viewShow.id = row.id
					this.viewShow.show = true
				}
			},
    viewTrajectory(id) {
      this.$router.push({
          path: '/distribution/trip?id=' + id
      })
		},
			pageChange(e) { // 页码切换事件
				this.page = e;
				this.getList()
			},
			handleSizeChange(val) {
				this.page = 1;
				this.pageSize = val;
				this.getList()
			},
			startup(row) {
				let usetate = ''
				if (row.usestate == '已冻结') {
					usetate = 2
				} else {
					usetate = 1
				}

				this.$confirm('是否修改账号状态?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.post('/Admin/Brother/Account/SetState', { ids: [row.id], state: usetate }).then(res => {
						console.log(res)
						this.$message({
							type: 'success',
							message: '修改成功!'
						});
						this.getList()
					})
				})
			},
			Line(row) {
				let usetate = ''
				if (row.usestate == '已冻结') {
					usetate = 2
				} else {
					usetate = 1
				}

				this.$confirm('是否修改小哥在线状态?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.post('/Admin/Brother/Account/SetState', { ids: [row.id], state: usetate }).then(res => {
						console.log(res)
						this.$message({
							type: 'success',
							message: '修改成功!'
						});
						this.getList()
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar {
		padding: 20px 0 0;
	}

	.send {
		margin-top: 15px;
		margin-right: 10px;
	}

	.dialogForm {
		display: flex;
		flex-wrap: wrap;

		.el-form-item {
			width: 50%;
			float: left;

			&.all {
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}

    .user-face{
        display: flex;
        align-items: center;
        position: relative;
        .male,.female{
            font-size: 14px;
            position: absolute;
            left: 30px;
            top: 0;
            background-color: #fff;
            height: 16px;
            width: 16px;
            line-height: 16px;
            border-radius: 6px;
        }
        .male{
            color: var(--blue);
        }
        .female{
            color: var(--pink);
        }
    }
</style>
